<template>
	<view>
		<view class="" v-for="item,index in commentlist" :key="index">
			<uni-card :title="item.userId" :sub-title="item.foodId" thumbnail="" :extra="item.postDate" note="Tips">
				{{item.comment}}
			</uni-card>
		</view>

		<button type="primary" @click="toaddcomment">发表评论</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				"foodid": 1, // 待查询的食物id

				"pageIndex": 1, // 当前页码

				"pageSize": 5, // 每页记录数

				commentlist: [{
					"id": 14,
					"comment": "demoData",
					"foodId": 1,
					"postDate": "2020-09-24",
					"userId": 1
				}] // 需要渲染的评论列表
			}
		},

		//  下拉刷新：onPullDownRefresh
		// onPullDownRefresh() {
		// 	setTimeout(()=>{
		// 		this.getComments()
		// 	},1000)

		// },
		onPullDownRefresh() {
			this.reload()
		},
		//上拉加载触发 ： onreachbottom
		// onReachBottom() {
		// 	uni.showLoading({
		// 		title: '加载中'
		// 	})
		// 	setTimeout(()=>{
		// 		this.loadmore()
		// 	},1000)
		// },
		onReachBottom() {
			uni.showLoading()
			setTimeout(() => {
				this.loadmore()
			}, 1000);
		},
		onLoad(option) {
			this.foodid = option.foodid
			// console.log(this.foodid);
			// 加载第一页数据： 
			// this.getComments(this.foodid);
			this.reload()
		},
		methods: {
			//  加载指定页面的数据：
			getComments(id) {
				console.log(this.foodid);
				uni.request({
					url: 'http://localhost:8090/foodapp/comments/getCommentsByFoodIdByPage',
					method: 'POST',
					data: {
						"foodid": 1,
						"pageIndex": 1,
						"pageSize": 5
					},
					success: res => {
						// console.log(res);
						console.log(this.foodid);
						this.commentlist = res.data.data.content
						console.log(this.commentlist);
						uni.stopPullDownRefresh() // 停止当前页面下拉刷新。
					},
					fail: () => {},
					complete: () => {}
				});
			},
			reload() {
				console.log(this.foodid);
				uni.request({
					url: 'http://localhost:8090/foodapp/comments/getCommentsByFoodIdByPage',
					method: 'POST',
					header: {
						'content-type': 'application/json' //重点
					},
					data: {
						"foodid": this.foodid || 1,
						pageIndex: 1,
						pageSize: this.pageSize
					},
					success: res => {
						this.commentlist = res.data.data.content
						console.log(this.commentlist);

					},
					fail: (err) => {
						console.log(err);
					},
					complete: () => {
						uni.stopPullDownRefresh()
					}
				});
			},
			loadmore() {
				// // this.pageIndex = this.pageIndex + 1
				// this.pageIndex++
				// uni.request({
				// 	url: 'http://localhost:8090/foodapp/comments/getCommentsByFoodIdByPage',
				// 	method: 'POST',
				// 	data: {
				// 		foodid: this.foodid || 1,
				// 		pageIndex: this.pageIndex,
				// 		pageSize: this.pageSize
				// 	},
				// 	success: res => {
				// 		// this.commentlist = this.commentlist.concat(res.data.data.content)
				// 		// console.log(this.commentlist);
				// 		this.commentlist = [...this.commentlist, ...res.data.data.content]
				// 		uni.hideLoading() // 关闭动画
				// 	},
				// 	fail: (err) => {
				// 		console.log(err);
				// 	},
				// 	complete: () => {
				// 		uni.hideLoading()
				// 	}
				// });
				this.pageIndex = this.pageIndex + 1
				uni.request({
					url: 'http://localhost:8090/foodapp/comments/getCommentsByFoodIdByPage',
					method: 'POST',
					header: {
						'content-type': 'application/json' //重点
					},
					data: {
						foodid: this.foodid || 1,
						pageIndex: this.pageIndex,
						pageSize: this.pageSize
					},
					success: res => {
						this.commentlist = this.commentlist.concat(res.data.data.content)
						console.log(this.commentlist);

					},
					fail: (err) => {
						console.log(err);
					},
					complete: () => {
						uni.hideLoading()
					}
				});
			},

			toaddcomment() {
				uni.navigateTo({
					url: '../../addcomment/addcomment?foodid=' + this.foodid,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		},




	}
</script>

<style>

</style>